<template>
  <div class="Home">
      <!-- <el-header class="Header">Header</el-header> -->
      <el-container>
        <el-aside width="200px" class="Aside">
          <el-button type="primary" class="btn">新建</el-button>
          <!--  侧边导航 -->
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            background-color="#f5f5f5"
            text-color="#000"
            active-text-color="#66b1ff">
            <el-menu-item index="1">
              <i class="el-icon-s-home"></i>
              <span slot="title">我的文件</span>
            </el-menu-item>
            <el-menu-item index="2">
              <i class="el-icon-time"></i>
              <span slot="title">最近修改</span>
            </el-menu-item>
            <el-menu-item index="3">
              <i class="el-icon-star-on"></i>
              <span slot="title">我的收藏</span>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-delete"></i>
              <span slot="title">回收站</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main class="Main">
          <el-divider content-position="left">我的文件</el-divider>
          <!-- <el-button type="primary" @click="shot" >截图</el-button> -->
          <div class="Main-container" >
              <div class="Home-container-item" v-for="item in saveProcessList" :key="item.id" >
             <div class="place" @contextmenu.prevent='myFunction($event , item)' @click="getProcessDetail(item)" ref="aa">
              <img v-if="item.thumbnail" :src="item.thumbnail" alt="" @error="errhandel">
              <div v-else class="default-container">
                <span class="inner-container"><i class="el-icon-picture-outline" style="font-size:30px"></i>
                <span>
                  加载失败
                </span>
                </span>
              </div>
            </div>
           <div class="container-item-info"><i class="el-icon-menu" style="margin:5px"></i>{{item.name}}</div>
          </div>
            </div>         
          <div class="icon">
            <i class="el-icon-edit"></i>
            <i class="el-icon-share"></i>
            <i class="el-icon-delete"></i>
          </div>
          <div v-show="visible">
            <ul  :style="{left:left+'px',top:top+'px'}" class="contextMenu">
              <li @click="browsePanel()"><i class="el-icon-view"></i> 浏览</li>
              <li @click="editPanel()"><i class="el-icon-edit"></i> 编辑</li>
              <li @click="hRename"><i class="el-icon-edit-outline"></i> 重命名</li>
              <li @click="hDel"><i class="el-icon-delete"></i> 删除</li>
            </ul>
          </div>
        </el-main>
      </el-container>
    <el-dialog
      title="重命名"
      :visible.sync="dialogVisible"
      width="30%"
      @opened='hOpen'
      :close-on-click-modal='false'
      :before-close="handleClose">
      <span>名称：
        <el-input ref='input' v-model="newName" placeholder="请输入内容"   class="input" @focus="hFocus($event)"></el-input>
      </span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="hSubmit">确 定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import { watch } from 'vue';
import {  getSaveProcessList , UpdateProcessItem } from '@/Services/Process'
import axios from 'axios'
export default {
  name : 'home',
  data(){
    return {
      top:0,
      left:0,
      visible:false,
      dialogVisible:false,
      name:'',
      newName:'',
      saveProcessList:[],
      CurrentPanel: null
    }
  },
  created(){
    this.loadSaveProcessList()
  },
  methods :{
    //  删除
   async hDel() {
      // console.log(11);
      const { id } = this.CurrentPanel
      const result  = await this.$confirm("你确定删除当前流程吗?",'删除',{type : 'warning'}).catch(e => e)
      console.log(result);
      if(result === 'cancel') return
      await axios.delete(`/Process/${id}`)
      this.$message.success("删除成功")
      this.loadSaveProcessList()
    },
   async hSubmit() {
      if(this.newName.trim() === "") return this.$message.warning("请输入名称")
      this.dialogVisible = false
      this.CurrentPanel.name = this.newName
      console.log(this.CurrentPanel);
      await UpdateProcessItem(this.CurrentPanel)
      await this.loadSaveProcessList()
      this.$message.success("更改成功")
      

    },
    hFocus(event){
      event.currentTarget.select()
    },
    handleClose() {
      this.dialogVisible = false
    },
    hOpen() {
      this.$refs.input.focus()
      // event.currentTarget. select()
    },
    hRename() {
      const { name } = this.CurrentPanel
      this.dialogVisible = true
      this.newName = name
    },
    myFunction(e,item) {
      let x = e.clientX;
      let y = e.clientY;
      this.top = y; 
      this.left = x;
      this.visible = true
      this.CurrentPanel = item
    },
    closeMenu() {
         this.visible = false;
    },
    async loadSaveProcessList () {
      try {
        const {data} = await getSaveProcessList()
        this.saveProcessList = data
      } catch (error) {
        
      }
    },
    getProcessDetail({id,name}){
      this.$router.push({
        path:`/edit`,
        query:{
          id,
          name:encodeURI(name)
        }
    
      })
    },
    errhandel(){
      console.log("加载失败");
    },
    //浏览
    browsePanel(){
    const { id ,name } = this.CurrentPanel
    this.$router.push({
        path:`/run`,
        query:{
          id,
          name:encodeURI(name)
        }
    
      })
    },
    // 编辑面板
    editPanel(){
      this.getProcessDetail(this.CurrentPanel)
    }
    
  },
  watch :{
      visible(value) {
        if (value) {
            document.body.addEventListener('click', this.closeMenu)
        } else {
            document.body.removeEventListener('click', this.closeMenu)
        }
    }
  }
}
</script>

<style>
.Main-container{
  display: flex;
}
.Home ,.Home .el-container{
  height: 100%;
}
.Header {
  background-color: aqua;
}
.Aside {
  background-color: #f4f4f4;
  /* border: 1px solid #666; */
  /* height: 100%; */
  min-height: 400px;
}
.Main {
  /* display: flex; */
  background-color: #f4f4f4;

}
.Home-container-item{
  display: inline-flex;
  flex-direction: column;
  cursor: pointer;
}
.Home-container-item .container-item-info{
  padding: 0px 5px;
}
.place:hover{
  box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
}

.Home-container-item img {
  display: block;
  width: 100%;
  height: 100%;
  /* object-fit: cover; */
  /* object-position: center center; */
}
.btn {
  display: block;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
  width: 100px;
  height: 40px;
}
.icon {
  position: absolute;
  right: 0;
  top: 0;
}
.icon i {
  font-size: 20px;
  margin: 15px;
  padding: 5px;
}
.icon i:hover{
  background-color: #f5f5f5;
}
.place {
  display: inline-flex;
  width: 200px;
  height: 200px;
  margin: 5px 10px;
  border: 1px solid #c8c8c8;
  transition: all 0.2s linear;
  border-radius: 5px;
  }
.place:hover {
  background-color: #fff;
  transform: translateY(-6px);
}
  .contextMenu{
      margin: 0;
      background: #fff;
      width: 160px !important;
      
      z-index: 3000;
      position: fixed;
      list-style-type: none;
      padding: 5px 0;
      border-radius: 4px;
      font-size: 12px;
      font-weight: 400;
      color: #333;
      box-shadow: 2px 2px 3px 0 rgb(0 0 0 / 30%);
      text-align: center;
      width: 5%;
        }
  .contextMenu li{
      margin:8px;
      text-align: left;
      height: 30px;
      line-height: 30px;
      font-size: 16px;
  }
 .contextMenu li:hover {
    background-color: #f5f5f5;
  }
   .contextMenu li i{
      text-align: left;
      margin-left: 10px;
      margin-right: 15px;
  }
  .el-icon-menu {
    color: #4386f5;
  }
  .input {
    width: 80%;
  }
  .default-container{
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items:center;
    background-color: #f5f7fa;
  }
 .default-container .inner-container {
  display: flex;
  align-items: center;
 }
</style>